<script setup lang="ts">
import { ifaceLinks } from "@/api/modules/common";
import { ref, onMounted, onBeforeUpdate, nextTick } from "vue";
import { ifaceAll, ifacemodeUpdate } from "@/api/modules/dynamic-camouflage/line-config";

interface Props {
  modelValue?: any;
  multiple?: boolean;
  required?: boolean;
  placeholder?: string;
  isGetValue?: boolean;
  requestAll?: boolean;
  maxCollapseTags?: number;
  multipleLimit?: number;
  width?: string;
  isInitReload?: boolean;
  isName?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: undefined, //默认值
  multiple: false,
  required: false,
  placeholder: "请选择",
  isGetValue: false,
  requestAll: false,
  isName: false,
  maxCollapseTags: 1,
  multipleLimit: 0,
  width: "auto",
  isInitReload: false // 只有在编辑回显的时候需要设置为true
});
const emit = defineEmits(["update:modelValue", "selectHandler", "clear"]);
const list = ref<
  Array<{
    id: string | number;
    value: string;
    [key: string]: any;
  }>
>([]);
const loading = ref(false);

async function searchGrade() {
  console.log(`   list.value`, list.value);
  if (list.value.length > 0) {
    return;
  }
  loading.value = true;
  try {
    const ifaceLinksRes = await ifaceAll();
    await nextTick(() => {
      list.value = Object.values(ifaceLinksRes).map(item => {
        return {
          id: item,
          name: item,
          value: item
        };
      });
    });
    loading.value = false;
    if (props.modelValue) {
      if (props.multiple) {
        showValueList.value = props.modelValue;
      } else {
        showValue.value = props.modelValue;
      }
    }
  } catch (error) {
    loading.value = false;
  }
}

const showValue = ref<string>("");
const showValueList = ref(props.modelValue);
onBeforeUpdate(() => {
  if (props.multiple) {
    showValueList.value = props.modelValue;
  } else {
    showValue.value = props.modelValue;
  }
  if (props.isInitReload) {
    searchGrade();
  }
});
onMounted(() => {
  searchGrade();
});

//选择回调
function changeCb(val: any) {
  if (props.isGetValue && !props.multiple) {
    //单选获取值的情况
    const row = list.value.find((item: { id: string | number; value: string }) => {
      return item.id === val;
    });
    if (row) {
      emit("update:modelValue", row.value);
    }
  } else {
    emit("update:modelValue", val);
  }
  // 选择的数据回调
  if (props.multiple) {
    const arr: {
      id: string | number;
      value: string;
    }[] = [];
    if (val.length) {
      val.forEach((item: number | string) => {
        const row: any = list.value.find((i: { id: string | number; value: string }) => {
          return i.id === item;
        });
        arr.push(row);
      });
    }
    console.log(arr);
    emit("selectHandler", [...arr]);
  } else {
    const row = list.value.find((item: { id: string | number; value: string }) => {
      return item.id === val;
    });
    emit("selectHandler", row);
  }
}

//情空单选
function clearCb() {
  emit("update:modelValue", undefined);
  emit("clear");
}
</script>

<template>
  <el-select
    @focus="searchGrade"
    @clear="clearCb"
    :style="{ width: width }"
    filterable
    v-if="!multiple"
    :loading="loading"
    @change="changeCb"
    v-model="showValue"
    :placeholder="placeholder"
  >
    <el-option v-if="requestAll" :value="0" label="全部"></el-option>
    <el-option :label="item.name" :value="item.id" v-for="item in list" :key="item.id" />
  </el-select>
  <el-select
    @focus="searchGrade"
    :style="{ width: width }"
    v-else
    filterable
    multiple
    :multiple-limit="multipleLimit"
    collapse-tags
    collapse-tags-tooltip
    value-key="value"
    :loading="loading"
    :max-collapse-tags="maxCollapseTags"
    @change="changeCb"
    v-model="showValueList"
    :placeholder="placeholder"
  >
    <el-option :label="item.name" :value="item.id" v-for="item in list" :key="item.id" />
  </el-select>
</template>

<style scoped lang="less"></style>
